﻿<UserControl x:Class="CircularAnimations.Examples.BlueDot"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local='clr-namespace:CircularAnimations.Examples'
    xmlns:diag="clr-namespace:System.Diagnostics;assembly=WindowsBase"

    Height="80" Width="80">
	<UserControl.Resources>
	<!--BeginTime="{Binding ElementName=ellipse, Converter={StaticResource AngleConverter},
		Path=Width}"-->
		<Storyboard x:Key="GrowStoryBoard">
      
      <DoubleAnimationUsingKeyFrames   Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" RepeatBehavior="Forever">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02" Value="1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.6000000" Value="1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:03" Value="0" KeySpline="0.767,0,0.654,0.889"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames  Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" RepeatBehavior="Forever">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02" Value="1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.6000000" Value="1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:03" Value="0" KeySpline="0.767,0,0.654,0.889"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</UserControl.Resources>
	<UserControl.Triggers>
		<EventTrigger RoutedEvent="FrameworkElement.Loaded">
			<BeginStoryboard Storyboard="{StaticResource GrowStoryBoard}"/>
		</EventTrigger>
		
	</UserControl.Triggers>
    <Grid>
    	<Ellipse Stroke="{x:Null}" x:Name="ellipse" RenderTransformOrigin="0.5,0.5">
    		<Ellipse.RenderTransform>
    			<TransformGroup>
    				<ScaleTransform ScaleX="0" ScaleY="0"/>
    				<SkewTransform AngleX="0" AngleY="0"/>
    				<RotateTransform Angle="0"/>
    				<TranslateTransform X="0" Y="0"/>
    			</TransformGroup>
    		</Ellipse.RenderTransform>
    		<Ellipse.Fill>
    			<RadialGradientBrush>
    				<GradientStop Color="#CA2C8DDE" Offset="0.634"/>
    				<GradientStop Color="#39FFFFFF" Offset="1"/>
    				<GradientStop Color="#CA2C64DE" Offset="0.33"/>
    				<GradientStop Color="#B56A8FDE" Offset="0.062"/>
    			</RadialGradientBrush>
    		</Ellipse.Fill>
    	</Ellipse>
            
    </Grid>
</UserControl>
